/* 
    Document   : form.css
    Created on : Aug 5, 2011, 3:57:27 PM
    Author     : Jason
    Description: CSS specific to jobs_groups/form.ctp
*/



* {
  line-height: 1.0; /* override jquery ui setting */
}

/*div.accordionPanel * {
  display: none;
}*/

form {
  width: 700px;
  /* center it */
  margin-left: auto;
  margin-right: auto;
}


fieldset {
  background-color: white;
}


#jobGroupSelector {
  width: 31em;
}


div.form {
  float: none;  /* override */
  border: none;
  font-family: 'lucida grande',verdana,helvetica,arial,sans-serif;
}

div.form h3 {
   font-family: 'lucida grande',verdana,helvetica,arial,sans-serif;
}

/* initially hide form elements besides Job Group/Job Name selection widget */
.secondaryJobStuff {
  display: none;
}

/* disable the submit btn if use has not yet selected a job group or name, etc */
form .submit input.disabledSubmit {
  background: lightgray;
  text-shadow: none;
}

form .submit input.disabledSubmit:hover {
  background: lightcoral;
  text-shadow: none;
}


div#content {
  min-height: 500px; /* forcing footing downward some so tooltip on submit btn can display */
}


/* ---------------------------------------------------------------------
  CSS Tooltip stuff from: http://sixrevisions.com/css/css-only-tooltips/
*/
.cssTooltip {
  border-bottom: 1px dotted #000000; color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.cssTooltip span {
  margin-left: -999em;
  position: absolute;
}
.cssTooltip:hover span {
  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute; left: 1em; top: 2em; z-index: 99;
  margin-left: 0; width: 250px;
}
.cssTooltip:hover img {
  border: 0; margin: -10px 0 0 -55px;
  float: left; position: absolute;
}
.cssTooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
  display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }

/*   * html a:hover { background: transparent;  z-index: 101; }*/
* html a.cssTooltip:hover { background: transparent;  z-index: 101; }


/*.classic {background: #FFFFAA; border: 1px solid #FFAD33; }*/
.classic { background-color: rgba(255,255,170,.91); border: 1px solid #FFAD33; } 
/*.critical { background: #FFCCAA; border: 1px solid #FF3334;	}*/
.critical { background-color: rgba(255,204,170,.91); border: 1px solid #FF3334;	}
/*.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}*/
.help { background-color: rgba(159,218,238,.86); border: 1px solid #2BB0D7;	}
/*.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}*/
.info { background-color: rgba(159,218,238,.86); border: 1px solid #2BB0D7;	}
/*.warning { background: #FFFFAA; border: 1px solid #FFAD33; }*/
.warning { background-color: rgba(255,255,170,.91); border: 1px solid #FFAD33; } 

/* -------------- end tooltip stuff --------------- */

.smallTextBoxDiv {
  width: 10em;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 5px;  
}

.smallTextBoxDiv input {
  width: inherit;
  padding: 4px;
}

.smallTextBoxDiv select {
  width: inherit;
  padding: 3px;
}

option {
  font-size: inherit;
}

.versionNum {
  margin-right: 20px;
}

/* div that contains multiple form inputs, arranged horizontally */
div.horizGroup {
  margin-bottom: 0px;
  margin-left:   -5px;
}

select {
  padding: .5%;
}

.sirtSubsetSelect {
  width: 19.5em;
}
.sirtTextInput  {
  width: 21.5em;
}

.foaThreshold, .foaOutside {
  /*width: 9.5em;*/
  font-size: 95%;
}


.foaThreshold {
  margin-left: 0px;
}

.comproiType{
  margin-left: 8px;
}

.foaOutside {
  margin-left: 10px;
}



.regTextFrosted {
  font-weight: normal;
  color: whitesmoke;
}

.smaller {
  font-size: smaller;
}

.inline-block {
  display: inline-block;
}

/* ----------------------------
      IMAGE PARAMETERS         */

fieldset.paramFieldset {
  display: none;
}

fieldset.showFieldset {
  display: block;
}


fieldset.paramFieldset fieldset {
  margin-top: 15px;
}

/*
fieldset.paramFieldset fieldset div {
  margin: 0 5px;  
}
*/

fieldset.paramFieldset fieldset legend {
  color: black;
  font-size: smaller;
}

/* -----------------------------
        PROJECTION params      */

#gaussianSigmaDiv {
  display: none;
  margin-bottom: 0px;
}

#gaussianSigmaDiv.show {
  display: inline-block;
}

.hide {
  display: none;
}

.show {
  display: inline-block;
}

div.singleRadioWrapper {
  padding: 0;
}


/* Text INPUTs - make width large so user can see most or all of the entire path  */
input[type="text"] {
  width: 550px;
}

/* Make font of the disabled input smaller so user can see most or all of the entire path */
input#JobGroupDirAbsPath {
  font-size: 70%;
}

/*  INPUT FIELDS: background, border, rounded corners  */
input:not([type="radio"]),
textarea,
select, 
input:not([disabled])    {
    
    background: #ffffff; 
    /* border: 1px solid #ddd;   seems to need this to reset input border to gray when using rounded corners */
    border: 1px solid #bbb;  /* seems to need this to reset input border to gray when using rounded corners */
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    /*
    outline: none;
    padding: 5px;
    width: 200px;
    float:left;
    */
}

/* INPUTS when FOCUSED */
input:focus,
textarea:focus, 
select:focus  {
  
  -moz-box-shadow:0px 0px 3px #aaa;
  -webkit-box-shadow:0px 0px 3px #aaa;
  box-shadow:0px 0px 3px #aaa;
  
  background-color:#FFFEEF; /* light yellow */ 
  
  border: 1px solid;
  outline:none;          /* disable browser's default input outline so I can use border color below */
  border-color: #f7bf18; /* orange-ish like Chrome's default */
  
}

/* DISABLED inputs */
input[disabled="disabled"],
select[disabled="disabled"]  {

  background-color: #f2f2f2;
  border: 1px solid #bbb;
} 


/* "Placeholder" text (hints inside the inputs) - both rules required */
::-webkit-input-placeholder {
  color: lightgray;
}
:-moz-placeholder {
  color: lightgray;
}

/* give the fieldset the look of the "fancy sliding form" */
#jobVersionFieldset {
  
  -moz-box-shadow:0px 0px 3px #aaa;
  -webkit-box-shadow:0px 0px 3px #aaa;
  box-shadow:0px 0px 3px #aaa;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:2px solid #fff;

  background-color: white;
  overflow:hidden;
  
  padding: 0px;
  /*width: 700px;*/
  /* remove curved corners on top  */
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-left-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
}


#jobFieldset {
  background-color: white;
}



form div.checkbox {
  margin-bottom: 0px;
}

form div {
  margin-bottom: 0px;
}

.accordianLegend {
  font-size: 1.5em;
  
}

div#accordionPanel {
  overflow: visible; /* allow the CSS tooltip to show over the end of the div */ 
}

/* The "flash message" and individual field error messages */
div.message, div.error-message {
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    /*width: 95%;*/
    display: inline-block; /* limit the div's width to just big enough for the content */
}

/* The "flash message" at the top of the screen after form submission (on error for this page) */
div.message {
  padding: .4em;
}


/* PAPER CURL EFFECT */
/*
#jobVersionFieldset:before,  #jobVersionFieldset:after  {
  position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
}
#jobVersionFieldset:after {
  left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}
*/
/* PAPER CURL EFFECT */
/*
#jobFieldset:before,  #jobFieldset:after  {
  position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
}
#jobFieldset:after {
  left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}
*/
